<script setup>
import { ref, onMounted, defineEmits, reactive } from 'vue'

// 抽屉变量 只读
const props = defineProps({
  drawer: Boolean
})
// 回调 关闭抽屉
const emits = defineEmits({
  handleClose: null,
})
const direction = ref('ltr')
// 调用 父组件方法, emits只能在setup顶级领域使用
const handleClose = () => {
  emits('handleClose')
}

const el_switch = ref(true)

</script>

<template>
  <el-drawer
    v-model="props.drawer"
    :with-header="false"
    :direction="direction"
    size="75%"
    :before-close="handleClose"
  >
    <div class="flex-col  px-1">
      <div class="flex justify-between">
        <h1 class=" font-semibold">极简日记</h1>
        <img
          class="w-5 h-5"
          src="../../../assets/sidebar/search-line.png"
        >
      </div>

      <div class="flex opacity-50 text-mini font-light mt-1">
        2023年01月23日 下午好
      </div>

      <div class="flex justify-between items-center pt-2">
        <h1 class=" font-medium text-xs">2023年01月23日的回忆</h1>
        <el-switch
          v-model="el_switch"
          class="h-10 w-10"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </div>


      <div class="flex-col  text-mini items-center justify-center mx-auto h-32 w-full bg-gray-50 rounded-md mt-3">
        
          <img
          class="mx-auto pt-10"
          src="../../../assets/sidebar/delete-bin-6-line.png"
        >
       
        <h1 class="flex items-center font-medium justify-center pt-4">
          你还没有去年今日哦
        </h1>
        <h1 class="flex items-center font-thin justify-center pt-1">
          快去写日记吧
        </h1>
      </div>

      <div>
        
      </div>

    </div>
  </el-drawer>
</template>

<style scoped lang='scss'></style>